<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="12">
        <div class="chart-container">
          <h3>会议总数统计</h3>
          <div v-if="loading" class="loading">加载中...</div>
          <div class="echarts" ref="totalNumberOfMeetings"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="chart-container">
          <h3>另一个图表占位</h3>
          <div class="echarts">👉 这里可以放另一个 ECharts 图表</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import * as echarts from 'echarts';

export default {
  name: "Meetingreport",
  data() {
    return {
      loading: true,
    };
  },
  mounted() {
    // 模拟异步数据加载
    setTimeout(() => {
      this.loading = false;
      this.$nextTick(() => {
        this.totalNumberOfMeetings();
      });
    }, 800);
  },
  methods: {
    totalNumberOfMeetings() {
      const chartDom = this.$refs.totalNumberOfMeetings;
      const myChart = echarts.init(chartDom);

      const option = {
        title: {
          text: '会议数量分布',
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.7)',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '10%',
          right: '10%',
          bottom: '10%',
          top: '20%'
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLabel: {
            rotate: 45
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '会议数',
            type: 'bar',
            data: [12, 20, 15, 25, 22, 30, 18],
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: '#409EFF' },
                  { offset: 1, color: '#53CBB0' }
                ]
              }
            },
            barWidth: 40,
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ],
        animationType: 'slide',
        animationDuration: 1000
      };

      window.addEventListener('resize', () => {
        myChart.resize();
      });

      myChart.setOption(option);
    }
  },
};
</script>
<style scoped>
.app-container {
  background-color: #f9f9f9;
  padding: 20px;
}

.chart-container {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 20px;
  position: relative;
}

.echarts {
  width: 100%;
  height: 400px;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  color: #888;
  z-index: 2;
}
</style>
